<template>
	<view class="e-keyboard" @touchmove.stop.prevent="noop">
		<view class="e-keyboard__button-wrapper" v-for="(item, index) in keyBoardList" :key="index">
			<view class="e-keyboard__button-wrapper__button" :style="[getItemStyle(index)]" @tap="keyboardClick(item)"
				hover-class="e-hover-class" :hover-stay-time="200">
				<text class="e-keyboard__button-wrapper__button__text">{{ item }}</text>
			</view>
		</view>
		<view class="e-keyboard__button-wrapper">
			<view class="e-keyboard__button-wrapper__button e-keyboard__button-wrapper__button--gray"
				hover-class="e-hover-class" :hover-stay-time="200" @touchstart.stop="backspaceClick"
				@touchend="clearTimer">
				<e-icon name="backspace" color="#303133" size="28"></e-icon>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import {defineComponent} from 'vue'
	import mpMixin from "../../libs/mixin/mpMixin";
	/**
	 * number-keyboard 键盘组件
	 * @description
	 * @tutorial
	 * @property {String}	mode		键盘的类型，number-数字键盘，card-身份证键盘
	 * @property {Boolean}	dotDisabled	是否显示键盘的"."符号
	 * @property {Boolean}	random		是否打乱键盘按键的顺序
	 * @event {Function} change		点击键盘触发
	 * @event {Function} backspace	点击退格键触发
	 * @example
	 */
	export default defineComponent({
		name: "e-number-keyboard",
		mixins: [mpMixin],
	});
</script>

<script lang="ts" setup>
	import {
		computed,
		toRefs
	} from 'vue'
	import {
		numberKeyboardProps
	} from './props';
	import {
		arrayRandom
	} from '../../libs/utils'
	import {
		noop
	} from "../../libs/utils/_utils";
	import {
		keyboardEmits
	} from '../../libs/tokens'
	import {
		useDefaultProps
	} from '../../libs/hooks'
	import type {
		StyleProperties
	} from "../../libs/tokens";
	

	import componentsProps, {
		type DefaultProps
	} from "../../libs/config/componentsProps";

	const {
		numberKeyboard: numberKeyboardDefaultProps
	} = toRefs(componentsProps);

	const _props = defineProps(numberKeyboardProps)

	const props = useDefaultProps < DefaultProps['numberKeyboard'] > (_props, numberKeyboardDefaultProps);
	const emit = defineEmits(keyboardEmits)

	const cardX = 'X' // 身份证的X符号
	const dot = '.' // 点
	let timer: number | undefined = undefined // 长按多次删除的事件监听


	const numList = computed(() => {
		if (props.value.dotDisabled && props.value.mode == 'number') {
			return [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
		} else if (!props.value.dotDisabled && props.value.mode == 'number') {
			return [1, 2, 3, 4, 5, 6, 7, 8, 9, dot, 0]
		} else if (props.value.mode == 'card') {
			return [1, 2, 3, 4, 5, 6, 7, 8, 9, cardX, 0]
		}
		return []
	})
	// 键盘需要显示的内容
	const keyBoardList = computed(() => {
		if (!props.value.random) {
			return numList.value;
		} else {
			return arrayRandom(numList.value);
		}
	})




	// 按键的样式，在非乱序&&数字键盘&&不显示点按钮时，index为9时，按键占位两个空间
	const getItemStyle = (index: number) => {
		let style: StyleProperties = {};
		if (props.value.mode == 'number' && props.value.dotDisabled && index == 9) style.width = '464rpx';
		return style;
	}
	// // 是否让按键显示灰色，只在非乱序&&数字键盘&&且允许点按键的时候
	// const btnBgGray = (index: number) => {
	// 	if (!props.value.random && index == 9 && (props.value.mode != 'number' || (props.value.mode == 'number' && !
	// 			props.value.dotDisabled))) return true;
	// 	else return false;
	// }
	// 点击退格键
	const backspaceClick = () => {
		emit('backspace');
		clearInterval(timer); //再次清空定时器，防止重复注册定时器
		timer = undefined;
		timer = setInterval(() => {
			emit('backspace');
		}, 250);
	}
	const clearTimer = () => {
		clearInterval(timer);
		timer = undefined;
	}
	// 获取键盘显示的内容
	const keyboardClick = (val: string | number) => {
		// 允许键盘显示点模式和触发非点按键时，将内容转为数字类型
		if (!props.value.dotDisabled && val != dot && val != cardX) val = Number(val);
		emit('change', val);
	}
</script>

<style lang="scss" scoped>
	@import "../../libs/theme/number-keyboard.scss";
</style>
